<template>
  <div class="seller-item-manage">
    <el-form label-position="left" label-width="90px">
      <el-row :gutter="5">
        <el-col :span="8">
          <el-form-item label="外部编号：">
            <el-input v-model="param.outCode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="search">搜索</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div class="table-action">
      <el-button type="primary" @click="goItemEdit(0, 'add')">创建商品</el-button>
    </div>
    <el-table :data="tableList" max-height="520" stripe>
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="买家信息：">
              <span>{{props.row.realName}} {{props.row.mobile}} {{props.row.deliveryLocation}}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="id" min-width="40"></el-table-column>
      <el-table-column label="商品" min-width="200">
        <span slot-scope="scope">
          <div class="item-img">
            <img :src="scope.row.itemMainImg" />
          </div>
          <div class="item-sku">
            <p>{{scope.row.itemName}}</p>
          </div>
        </span>
      </el-table-column>
      <el-table-column label="展示价格" min-width="80">
        <span slot-scope="scope" class="fee">{{scope.row.price | formatPrice}}</span>
      </el-table-column>
      <el-table-column label="上下架状态" min-width="80">
        <span slot-scope="scope">{{ITEM_STATUS[scope.row.itemShelf]}}</span>
      </el-table-column>
      <el-table-column label="创建时间" min-width="120">
        <span slot-scope="scope">{{moment(scope.row.createdAt).format('YYYY-MM-DD HH:mm:ss')}}</span>
      </el-table-column>
      <el-table-column label="操作" min-width="80">
        <template slot-scope="scope">
          <div>
            <a class="action" @click="createOrder(scope.row)">下单</a>
            <a class="action" @click="goItemEdit(scope.row.id, 'edit')">编辑</a>
            <a
              class="action"
              @click="setShelfStatus(scope.row)"
            >{{scope.row.itemShelf === 0 ? '上架' : '下架'}}</a>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="tableFoot">
      <div class="paging">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="param.pageNo"
          :page-size="param.pageSize"
          :page-sizes="[10,20,30,40,50,100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <el-dialog
      width="650px"
      title="创建订单"
      v-if="showAdd"
      :visible.sync="showAdd"
      :lock-scroll="true"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <CreateOrder @close="closeAdd" @showOrderDetail="showDetail" :itemId="addForm.id" />
    </el-dialog>
    <el-dialog
      width="650px"
      title="订单创建成功"
      v-if="showSuccess"
      :visible.sync="showSuccess"
      :lock-scroll="true"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <CreateSuccess :orderDetail="orderDetail" />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="showSuccess = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
import CreateOrder from "./components/create-order-form";
import CreateSuccess from "./components/success-order-table";
export default {
  name: "seller-item-manage",
  components: {
    CreateOrder,
    CreateSuccess
  },
  data() {
    return {
      moment: moment,
      ITEM_STATUS: this.$common.ITEM_STATUS,
      addForm: {},
      tableList: [],
      param: {
        pageNo: 1,
        pageSize: 10,
        outCode: ""
      },
      orderDetail: {},
      total: 0,
      showAdd: false,
      showSuccess: false
    };
  },
  computed: {},
  methods: {
    showDetail(orderDetail) {
      this.orderDetail = orderDetail;
      this.showAdd = false;
      setTimeout(() => {
        this.showSuccess = true;
      }, 200);
    },
    closeAdd() {
      this.showAdd = false;
    },
    createOrder(item) {
      let itemJson = JSON.parse(JSON.stringify(item));
      this.addForm = itemJson;
      this.showAdd = true;
    },
    goItemEdit(id, type) {
      // 新页面打开商品编辑页
      window.open(`${window.location.origin}/seller/itemedit/${type}/${id}`);
    },
    setShelfStatus() {
      // 设置上下架状态
    },
    handleSizeChange(val) {
      this.param.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.param.pageNo = val;
      this.getTableData();
    },
    search() {
      this.param.pageNo = 1;
      this.getTableData();
    },
    getTableData() {
      if (this.param.dateRange) {
        this.param.startDate = this.param.dateRange[0];
        this.param.endDate = this.param.dateRange[1];
      }
      this.$api.item.pagingItem(this.param).then(res => {
        this.tableList = res.data.list;
        this.total = res.data.total;
      });
    }
  },
  created() {
    this.getTableData();
  }
};
</script>

<style lang="scss" scoped>
.seller-item-manage {
}
</style>